<template>
  <div class="mine">
    <div class="login" @click="toMyLogin">
      <img :src="avatar" alt="" class="touxiang" />
      <div class="information">
        <p>{{ nickName }}</p>
        <p>{{ mydesc }}</p>
      </div>
      <div class="mypage">
        <span>主页</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiangyoujiantou"></use>
        </svg>
      </div>
    </div>
    <button @click="$router.push({ path: '/login' })">退出登录</button>
    <button @click="$router.push('/echarts')">图表</button>
  </div>
</template>

<script>
import { reqUserInfoAPI } from "../../api/user";
import { getToken } from "../../utils/auth";
export default {
  data() {
    return {
      nickName: "请先登录",
      mydesc: "登录后享受特权",
      avatar: "https://img2.baidu.com/it/u=265176191,3002749178&fm=26&fmt=auto",
    };
  },
  computed: {},
  watch: {},

  methods: {
    //跳转到1登录页面或个人中心
    toMyLogin() {
      if (this.nickName == "请先登录") {
        this.$router.push({ path: "/login" });
      } else {
        this.$router.push({ path: "/changeUserInfo" });
      }
    },
  },
  // 获取用户信息，要登陆后才获取到
  async created() {
    // console.log(getToken());
    if (getToken) {
      //获取用户信息
      let result = await reqUserInfoAPI();
      console.log(result);
      this.avatar = result.avatar;
      this.nickName = result.nickName;
      this.mydesc = "点击修改签名";
    }
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.login {
  height: 150px;
  border-bottom: 1px solid rgb(219, 219, 219);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url("https://img1.baidu.com/it/u=3932807890,2581906168&fm=26&fmt=auto")
    no-repeat center center;
  background-size: cover;
}
.touxiang {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 15px;
}
.information {
  width: 60%;
  line-height: 30px;
}
.information p:first-child {
  font-size: 18px;
  font-weight: bold;
}
.mypage {
  background: rgb(214, 214, 214);
  font-size: 13px;
  height: 25px;
  line-height: 25px;
  width: 50px;
  padding-left: 5px;
  text-align: center;
  border-radius: 10px 0 0 10px;
}
.com {
  width: 96%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
}
</style>
